<!-- components/inventory/ProductDetailDrawer.vue -->
<template>
  <el-drawer
    v-model="visible"
    title="产品详情"
    direction="rtl"
    size="700px"
    @close="handleClose"
  >
    <div class="product-detail" v-loading="loading">
      <el-descriptions :column="1" border v-if="product.id > 0">
        <el-descriptions-item label="产品名称">
          {{ product.name }}
        </el-descriptions-item>
        <el-descriptions-item label="SKU">
          {{ product.sku }}
        </el-descriptions-item>
        <el-descriptions-item label="类目">
          {{ product.categoryName || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="品牌">
          {{ product.brandName || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="规格">
          {{ product.specification || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="单位">
          {{ product.unit }}
        </el-descriptions-item>
        <el-descriptions-item label="当前库存">
          <span :class="{ 'low-stock': product.stock < product.minStock }">
            {{ product.stock }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="安全库存">
          {{ product.minStock }}
        </el-descriptions-item>
        <el-descriptions-item label="售价">
          ¥{{ formatCurrency(product.salePrice) }}
        </el-descriptions-item>
        <el-descriptions-item label="成本价">
          ¥{{ formatCurrency(product.costPrice) }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(product.status)">
            {{ getStatusText(product.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="描述">
          {{ product.description || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDate(product.createdAt) }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ formatDate(product.updatedAt) }}
        </el-descriptions-item>
      </el-descriptions>
      <div v-else>
        无产品数据
      </div>
    </div>
    
    <div class="drawer-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, defineProps, defineEmits, watch } from 'vue'
import * as inventoryAPI from '@/api/inventory'

// 定义产品接口
interface Product {
  id: number
  sku: string
  name: string
  specification: string
  unit: string
  categoryName?: string
  brandName?: string
  description: string
  stock: number
  minStock: number
  salePrice: number
  costPrice: number
  status: string
  createdAt: string
  updatedAt: string
}

const props = defineProps<{
  modelValue: boolean
  productId: number | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'edit', product: Product): void
}>()

const visible = ref(false)
const loading = ref(false)
const product = ref<Product>({
  id: 0,
  sku: '',
  name: '',
  specification: '',
  unit: '',
  categoryName: '',
  brandName: '',
  description: '',
  stock: 0,
  minStock: 0,
  salePrice: 0,
  costPrice: 0,
  status: 'active',
  createdAt: '',
  updatedAt: ''
})

// 监听modelValue变化
watch(() => props.modelValue, (newValue: boolean) => {
  visible.value = newValue
  if (newValue && props.productId) {
    loadProductDetail(props.productId)
  }
})

// 监听visible变化
watch(visible, (newValue: boolean) => {
  emit('update:modelValue', newValue)
})

const loadProductDetail = async (id: number) => {
  loading.value = true
  try {
    const response = await inventoryAPI.getProductDetail(id)
    if (response.data) {
      product.value = response.data
    }
  } catch (error) {
    console.error('加载产品详情失败:', error)
  } finally {
    loading.value = false
  }
}

const handleClose = () => {
  visible.value = false
}

const handleEdit = () => {
  if (product.value.id > 0) {
    emit('edit', { ...product.value })
  }
  handleClose()
}

// 工具函数
const getStatusType = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'inactive': return 'info'
    case 'outofstock': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return '在售'
    case 'inactive': return '下架'
    case 'outofstock': return '缺货'
    default: return status
  }
}

const formatCurrency = (value: number | string | null | undefined) => {
  // 检查空值
  if (value === null || value === undefined) {
    return '0.00'
  }
  
  // 如果是字符串，尝试转换为数字
  let numValue: number
  if (typeof value === 'string') {
    numValue = parseFloat(value)
    // 如果转换失败，返回默认值
    if (isNaN(numValue)) {
      return '0.00'
    }
  } else {
    numValue = value
  }
  
  // 确保是数字类型后再调用toFixed
  return numValue.toFixed(2)
}

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.product-detail {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.low-stock {
  color: #f56c6c;
  font-weight: 600;
}
</style>